<template>
  <div v-loading="loading" class="components-container magicHome">
    <split-pane split="vertical" :min-percent="20" :default-percent="50" style="position:unset;">
      <template slot="paneL">
        <div style="overflow:auto;height:100%;width:100%;">
          <oaSystemMakeView ref="oaSystemMakeViewNew" :new-data="newData" />
        </div>
      </template>
      <template slot="paneR">
        <div style="overflow:auto;height:100%;width:100%;background-color: white; margin-left: 10px;">
          <oaSystemMakeView ref="oaSystemMakeViewOld" :new-data="newData" :old-data="oldData" />
        </div>
      </template>
    </split-pane>
    <div class="questionCss">
      <span>
        <el-tooltip placement="top">
          <div slot="content">
            <i class="el-icon-star-on" style="color: #e6a23c;font-size: 18px;" />: {{ $t('修改内容') }}<br>
            <!-- <i class="el-icon-star-on" style="color: #8bc34a;font-size: 18px;" />: {{ $t('新增内容') }}<br>-->
          </div>
          <i class="el-icon-question" />
        </el-tooltip>
      </span>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import oaSystemMakeView from '@/views/oa/systemMake/oaSystemMakeView.vue'
import { getNewAndOldData } from '@/api/oa/systemMake/oaSystemMake'

export default {
  components: {
  },
  data() {
    return {
      loading: false,
      newData: undefined,
      oldData: undefined
    }
  },
  watch: {
  },
  created() {
    new Vue({})
    Vue.component('oaSystemMakeView', oaSystemMakeView)
    this.$bus.$emit('async_done')
  },
  methods: {
    init(data) {
      console.log(data, '比对')
      if (data && data.id !== undefined) {
        this.loading = true
        getNewAndOldData(data.id).then(response => {
          if (response.data !== null) {
            this.newData = response.data.newData
            this.oldData = response.data.oldData
            this.$refs.oaSystemMakeViewNew.comparedInit(this.newData)
            this.$refs.oaSystemMakeViewOld.comparedInit(this.oldData)
          } else {
            this.msgError(this.$t('无可比数据'))
            this.$parent.$parent.oaSystemMakeComparedOpen = false
          }
          this.loading = false
        })
      } else {
        this.msgError(this.$t('数据异常'))
      }
    }
  }
}
</script>
<style scoped>
.components-container {
  position: absolute;
  margin: 0;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}
.questionCss {
  width: 100%;
  text-align: center;
  margin-top: -30px;
  z-index: 2000;
  font-size: 20px;
  position: absolute;
}
</style>
